<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>会员详细信息</title>
    <!-- Bootstrap -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="fonts/iconfont.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet" />
    <link href="../assets/css/table.css" rel="stylesheet" />
    <link href="../assets/css/content.css" rel="stylesheet" />
    <link href="../assets/css/form.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="../assets/js/html5shiv.min.js"></script>
          <script src="../assets/js/respond.min.js"></script>
          <![endif]-->
    <style type="text/css">
      .bordernone {
        border: none !important;
      }
      
      .hytx-img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
      }
      
      .hyxixitx {
        margin-left: 3px;
      }
      
      .hysubmitbtn {
        border-radius: 5px;
      }
      
      .hycanclebtn {
        border-radius: 5px;
      }
      
      .qh-btn {
        width: 100%;
        height: 50px;
        background: #F1F1F1;
        border-bottom: 3px solid #e66b18;
      }
      .huxxtxlable{
        line-height: 40px;
      }
      @media screen and (max-width: 550px) {
        .qh-btn .jy_table_list ul li {
          width: 30%;
        }
      }
    </style>
  </head>

  <body>
    <!--内容区域-->
    <div class="content">
      <div class="content-header col-md-12">
        <div class="con-header">
          <div class="col-md-10 col-sm-10 col-xs-10">
            <span class="content-title-pre"></span><span class="content-title-word">会员详细信息</span>
          </div>
        </div>
      </div>
      <div class="hyjbxx">
        <form class="form-horizontal" role="form">
          <div class="hyxixitx row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
              <div class="form-group mt5">
                <label for="firstname" class="col-lg-3 col-md-4 col-sm-4 col-xs-5 control-label slowlable huxxtxlable">头&emsp;&emsp;像</label>
                <div class="col-md-7 col-sm-6">
                  <img src="../assets/images/wutu.png" class="hytx-img" />
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="form-group mt5">
              <label for="firstname" class="col-lg-3 col-md-4 col-sm-4 col-xs-5 control-label slowlable">昵&emsp;&emsp;称</label>
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-7">
                <input type="text" class="form-control slowinput" placeholder="">
              </div>
            </div>
            <div class="form-group mt5">
              <label for="firstname" class="col-lg-3 col-md-4 col-sm-4 col-xs-5 control-label slowlable">地&emsp;&emsp;区</label>
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-7">
                <input type="text" class="form-control slowinput" placeholder="">
              </div>
            </div>
            <div class="form-group mt5">
              <label for="firstname" class="col-lg-3 col-md-4 col-sm-4 col-xs-5 control-label slowlable">会员卡号</label>
              <div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
                <input type="text" class="form-control slowinput" placeholder="">
              </div>
            </div>
            <div class="form-group mt5">
              <label for="firstname" class="col-lg-3 col-md-4 col-sm-4 col-xs-5 control-label slowlable">姓&emsp;&emsp;名</label>
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-7">
                <input type="text" class="form-control slowinput" placeholder="">
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="form-group mt5">
              <label for="firstname" class="col-lg-3 col-md-4 col-sm-4 col-xs-5 control-label slowlable">手&ensp;机&ensp;号</label>
              <div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
                <input type="text" class="form-control slowinput" placeholder="">
              </div>
            </div>
            <div class="form-group mt5">
              <label for="firstname" class="col-lg-3 col-md-4 col-sm-4 col-xs-5 control-label slowlable">活跃门店</label>
              <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                <input type="text" class="form-control slowinput" placeholder="">
              </div>
            </div>
            <div class="form-group mt5">
              <label for="firstname" class="col-lg-3 col-md-4 col-sm-4 col-xs-5 control-label slowlable">最后交互</label>
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-7">
                <input type="text" class="form-control slowinput" placeholder="">
              </div>
            </div>
            <div class="form-group mt5">
              <label for="firstname" class="col-lg-3 col-md-4 col-sm-4 col-xs-5 control-label slowlable">关注时间</label>
              <div class="col-lg-4 col-md-4 col-sm-5 col-xs-7">
                <input type="text" class="form-control slowinput" placeholder="">
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="form-group mt5">
              <label for="firstname" class="col-lg-3 col-md-4 col-sm-4 col-xs-5 control-label slowlable">备&emsp;&emsp;注</label>
              <div class="col-lg-7 col-md-7 col-sm-8 col-xs-7">
                <textarea class="form-control" rows="6"></textarea>
              </div>
            </div>
            <div class="form-group mt5">
              <div class="col-md-12 text-center">
                <button type="button" class="btn btn-warning submitbtn hysubmitbtn">
                  保存
                </button>
                <button type="button" class="btn btn-warning canclebtn hycanclebtn">
                  关闭
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="clear"></div>
      <div class="qh-btn mt20">
        <div class="jy_table_list col-md-12">
          <ul>
            <li class="active">消费记录</li>
            <li>储值记录</li>
            <div class="clear"></div>
          </ul>
        </div>
      </div>
      <div class="jy_contet_list bordernone">
        <div class="col-lg-7 col-md-9 col-sm-12 col-xs-12">
          <div class="table-responsive setup mt20">
            <table class="table">
              <thead class="tablethead">
                <tr>
                  <th class="firstth" valign="middle">序号</th>
                  <th class="secondta">消费时间</th>
                  <th>金额</th>
                  <th>订单号</th>
                  <th>桌号</th>
                  <th>储值消费(元)</th>
                  <th>卡券消费(元)</th>
                  <th>所在门店</th>
                </tr>
              </thead>
              <tbody class="mytable">
                <tr>
                  <td class="firsttd" valign="middle">1</td>
                  <td class="secondta">2016/12/03 19:00:00</td>
                  <td>500元</td>
                  <td>4687451</td>
                  <td>021</td>
                  <td>10元</td>
                  <td>0元</td>
                  <td>大圣烧烤</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">1</td>
                  <td class="secondta">2016/12/03 19:00:00</td>
                  <td>500元</td>
                  <td>4687451</td>
                  <td>021</td>
                  <td>10元</td>
                  <td>0元</td>
                  <td>大圣烧烤</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">1</td>
                  <td class="secondta">2016/12/03 19:00:00</td>
                  <td>500元</td>
                  <td>4687451</td>
                  <td>021</td>
                  <td>10元</td>
                  <td>0元</td>
                  <td>大圣烧烤</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
        <div class="page-page flr">
          <ul class="pagination">
            <li class="epage">
              <a href="#">上一页</a>
            </li>
            <li class="active">
              <a href="#">1 <span class="sr-only">(current)</span></a>
            </li>
            <li>
              <a href="#">2</a>
            </li>
            <li>
              <a href="#">3</a>
            </li>
            <!--<li><a href="#">4</a></li>-->
            <li>
              <a href="#">...</a>
            </li>
            <li class="epage">
              <a href="#">下一页</a>
            </li>
          </ul>
        </div>
        <div class="page-num flr">共9页，每页10条</div>
      </div>
        </div>
      </div>
      <div class="jy_contet_list bordernone hidden">
        <div class="col-lg-7 col-md-9 col-sm-12 col-xs-12">
          <div class="table-responsive setup mt20">
            <table class="table">
              <thead class="tablethead">
                <tr>
                  <th class="firstth" valign="middle">序号</th>
                  <th class="secondta">储值时间</th>
                  <th>储值金额(元)</th>
                  <th>赠送金额(元)</th>
                </tr>
              </thead>
              <tbody class="mytable">
                <tr>
                  <td class="firsttd" valign="middle">1</td>
                  <td class="secondta">2016/12/03 19:00:00</td>
                  <td>500</td>
                  <td>120</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">1</td>
                  <td class="secondta">2016/12/03 19:00:00</td>
                  <td>500</td>
                  <td>120</td>
                </tr>
                <tr>
                  <td class="firsttd" valign="middle">1</td>
                  <td class="secondta">2016/12/03 19:00:00</td>
                  <td>500</td>
                  <td>120</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
        <div class="page-page flr">
          <ul class="pagination">
            <li class="epage">
              <a href="#">上一页</a>
            </li>
            <li class="active">
              <a href="#">1 <span class="sr-only">(current)</span></a>
            </li>
            <li>
              <a href="#">2</a>
            </li>
            <li>
              <a href="#">3</a>
            </li>
            <!--<li><a href="#">4</a></li>-->
            <li>
              <a href="#">...</a>
            </li>
            <li class="epage">
              <a href="#">下一页</a>
            </li>
          </ul>
        </div>
        <div class="page-num flr">共9页，每页10条</div>
      </div>
        </div>
      </div>
    </div>

    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/echarts.common.min.js"></script>
    <script type="text/javascript">
      // table切换选中第几个下面的第几个div显现
      $('.jy_table_list ul li').on('click', function() {
        var index = $(this).index();
        $('.jy_table_list ul li').removeClass("active")
        $('.jy_table_list ul li').eq(index).addClass("active")
        $('.jy_contet_list').addClass('hidden')
        $('.jy_contet_list').eq(index).removeClass("hidden")
      })
    </script>
  </body>

</html>